<template>
  <div class="n-register">
    <van-nav-bar :title="header" right-text="活动细则" left-arrow @click-left="onClickLeft"
                 @click-right="onClickRight"/>
    <div class="upload-text-tip">
      <van-row>
        <van-col offset="2" span="8">上传图片</van-col>
      </van-row>
    </div>
    <div class="upload-content">
      <van-row>
        <van-col span="10">
          <van-uploader :after-read="onReadOne" accept="image/jpeg, image/png">
            <img class="upload-img-icon" src="../../assets/svg/juhe_icon_2-001.svg">
            <p class="upload-img-text">收银台</p>
            <img class="upload-img-showImage"
                 :style='{backgroundImage:"url(\"" + checkoutCounterBackImg.base64 + "\")"}'>
          </van-uploader>
        </van-col>
        <van-col span="10">
          <van-uploader :after-read="onReadTwo" accept="image/jpeg, image/png">
            <img class="upload-img-icon" src="../../assets/svg/juhe_icon_2-001.svg">
            <p class="upload-img-text">门头照</p>
            <img class="upload-img-showImage"
                 :style='{backgroundImage:"url(\"" + doorPhotoImg.base64 + "\")"}'>
          </van-uploader>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="10">
          <van-uploader :after-read="onReadThr" accept="image/jpeg, image/png">
            <img class="upload-img-icon" src="../../assets/svg/juhe_icon_2-001.svg">
            <p class="upload-img-text">营业执照</p>
            <img class="upload-img-showImage"
                 :style='{backgroundImage:"url(\"" + businessLicenseImg.base64 + "\")"}'>
          </van-uploader>
        </van-col>
        <van-col span="10">
          <van-uploader :after-read="onReadFour" accept="image/jpeg, image/png">
            <img class="upload-img-icon" src="../../assets/svg/juhe_icon_2-001.svg">
            <p class="upload-img-text">店内环境照</p>
            <img class="upload-img-showImage"
                 :style='{backgroundImage:"url(\"" + environmentImg.base64 + "\")"}'>
          </van-uploader>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="10">
          <van-uploader :after-read="onReadFive" accept="image/jpeg, image/png">
            <img class="upload-img-icon" src="../../assets/svg/juhe_icon_2-001.svg">
            <p class="upload-img-text">主流餐饮平台入驻证明</p>
            <img class="upload-img-showImage"
                 :style='{backgroundImage:"url(\"" + enteringProveImg.base64 + "\")"}'>
          </van-uploader>
        </van-col>
      </van-row>
    </div>
    <div class="upload-submit-button">
      <button :class="disabledClassName" :disabled="isDisabledStatus" @click="submitImages">提交</button>
    </div>
  </div>
</template>

<script>
  import { fetchQiNiuToken } from '@/api/common';
  import {
    Icon,
    Row,
    Col,
    Uploader,
    Loading,
    Cell,
    CellGroup,
    Popup,
    Button,
    NavBar,
    Toast,
    Actionsheet
  } from 'vant';

  export default {
    name: 'upload-images',
    components: {
      [Loading.name]: Loading,
      [Toast.name]: Toast,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [Popup.name]: Popup,
      [Actionsheet.name]: Actionsheet,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data() {
      return {
        header: '支付宝蓝海行动报名',
        checkoutCounterBackImg: {
          base64: '',
          string: ''
        },  // 收银台图片
        doorPhotoImg: {
          base64: '',
          string: ''
        },  // 门头照
        businessLicenseImg: {
          base64: '',
          string: ''
        },  // 营业执照
        environmentImg: {
          base64: '',
          string: ''
        },  // 环境照
        enteringProveImg: {
          base64: '',
          string: ''
        },   // 入驻证明
        uptoken: '', // 七牛上传token
        isDisabledStatus: true, // 是否可点击按钮
        disabledClassName: 'submit-button'
      };
      // http://7xsh11.com2.z0.glb.qiniucdn.com/
      // http://192.168.1.123:9096/boss/common/getWebToken
      // https://upload.qiniu.com
    },
    methods: {
      onClickLeft() {
        this.$router.push('reconciliation');
      },

      onClickRight() {
        this.$router.push('rules');
      },

      // 收银台
      onReadOne(file) {
        this.setQNData(file, 'one');
      },

      // 门头照
      onReadTwo(file) {
        this.setQNData(file, 'two');
      },

      // 营业执照
      onReadThr(file) {
        this.setQNData(file, 'thr');
      },

      // 店内环境照
      onReadFour(file) {
        this.setQNData(file, 'four');
      },

      // 主流餐饮平台入驻证明
      onReadFive(file) {
        this.setQNData(file, 'five');
      },

      // 获取七牛 token
      getUptoken() {
        fetchQiNiuToken()
          .then(response => {
            if (response.data) {
              this.uptoken = response.data.uptoken;
            }
          })
          .catch(res => {
            Toast('网络异常！');
          });
      },

      // 确认提交图片数据
      submitImages() {
        // checkoutCounterBackImg // 收银台图片
        // doorPhotoImg // 门头照
        // businessLicenseImg // 营业执照
        // environmentImg // 环境照
        // enteringProveImg // 入驻证明
        const submitArrList = [];
        if (this.checkoutCounterBackImg.string) {
          submitArrList.push(this.checkoutCounterBackImg.string);
        }
        if (this.doorPhotoImg.string) {
          submitArrList.push(this.doorPhotoImg.string);
        }
        if (this.businessLicenseImg.string) {
          submitArrList.push(this.businessLicenseImg.string);
        }
        if (this.environmentImg.string) {
          submitArrList.push(this.environmentImg.string);
        }
        if (this.enteringProveImg.string) {
          submitArrList.push(this.enteringProveImg.string);
        }

        console.log(submitArrList);
        this.$router.push('waitResult');
      },

      // 判断是否全部有图片  如果有 按钮 可点击 没有 按钮 不可点击
      isDisabled() {
        if (this.checkoutCounterBackImg.string && this.doorPhotoImg.string && this.businessLicenseImg.string && this.environmentImg.string && this.enteringProveImg.string) {
          this.isDisabledStatus = false;
          this.disabledClassName = 'submit-button isSubmit';
        }
      },

      // 组装 七牛所需 数据
      setQNData(data, index) {
        Toast.loading({
          mask: true,
          duration: 0,
          forbidClick: true,
          message: '正在上传...'
        });
        const param = new FormData();
        param.append('file', data.file);
        param.append('token', this.uptoken);
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };

        this.uploading(param, config, data.content, index);
      },

      // 上传 图片
      uploading(param, config, content, index) {
        this.$axios.post('http://upload.qiniu.com/', param, config).then(response => {
          switch (index) {
            case 'one':
              this.checkoutCounterBackImg = {
                base64: content,
                string: response.data.key
              };
              break;
            case 'two':
              this.doorPhotoImg = {
                base64: content,
                string: response.data.key
              };
              break;
            case 'thr':
              this.businessLicenseImg = {
                base64: content,
                string: response.data.key
              };
              break;
            case 'four':
              this.environmentImg = {
                base64: content,
                string: response.data.key
              };
              break;
            case 'five':
              this.enteringProveImg = {
                base64: content,
                string: response.data.key
              };
              break;
          }
          Toast.clear();
        }).catch(error => {
          console.log(error);
          Toast.clear();
        });
      }
    },
    watch: {
      checkoutCounterBackImg: {
        handler: function() {
          this.isDisabled();
        },
        immediate: true
      },
      doorPhotoImg: {
        handler: function() {
          this.isDisabled();
        },
        immediate: true
      },
      businessLicenseImg: {
        handler: function() {
          this.isDisabled();
        },
        immediate: true
      },
      environmentImg: {
        handler: function() {
          this.isDisabled();
        },
        immediate: true
      },
      enteringProveImg: {
        handler: function() {
          this.isDisabled();
        },
        immediate: true
      }
    },
    created() {
      this.getUptoken();
    }
  };
</script>
<style lang="less">
  .upload-text-tip {
    height: .8rem;
    line-height: .8rem;
    font-size: 13px;
  }

  .upload-content {
    padding-bottom: 1rem;
    .van-row {
      margin: 0 .3rem .3rem;
      .van-col:first-child {
        margin-right: .3rem;
      }
      .van-col {
        text-align: center;
        width: 3.3rem;
        height: 2.9rem;
        border-radius: 3px;
        background: #2F66F3;
        overflow: hidden;
        .van-uploader {
          width: 100%;
          height: 100%;
          .van-uploader__input {
            z-index: 10;
          }
          img.upload-img-showImage {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            -webkit-background-size: cover;
            background-size: cover;
            background-repeat: no-repeat;
            z-index: 1;
          }
          img.upload-img-icon {
            position: relative;
            width: .72rem;
            height: .72rem;
            margin-top: .82rem;
            z-index: 2;
          }
          p.upload-img-text {
            position: relative;
            margin: 0;
            padding-top: .06rem;
            font-size: 12px;
            color: #fff;
            z-index: 2;
          }
        }
      }
    }
  }

  .upload-submit-button {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 7.5rem;
    height: 1rem;
    z-index: 99;
    .submit-button {
      display: inline-block;
      padding: 0;
      width: 100%;
      height: 100%;
      border: none;
      text-align: center;
      line-height: 1rem;
      background: #AAC2FF;
      color: #fff;
      font-size: 14px;
    }
    .submit-button.isSubmit {
      background: #2F66F3;
    }
  }
</style>
